﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script>

    (function ($) {
    'use strict';
    // ------------------------------------------------------- //
    // Auto Hide
    // ------------------------------------------------------ //    
        $(function () {
            //定义表格
            var table = $('#table').DataTable({
                language: {
                    "url": "__STATIC__/vendors/js/datatables/cn.json"
                },
                lengthMenu: [
                    [10, 15, 20, -1],
                    [10, 15, 20, "所有"]
                ],//分页数目
                stateSave: true, 
                columnDefs: [
                    { "orderable": false, "targets": 9}//禁止排序
                ]
            });
        });
        
        //初始化input
        $("#excel-input").fileinput({
            showPreview:false,
            language: 'zh',
            uploadUrl: '{:url('Stock/input')}',
            required: true,
            showBrowse: true, 
            browseOnZoneClick: true,
            dropZoneEnabled: false,
            allowedFileExtensions: ["xls", "xlsx"],//只能选择xls,和xlsx格式的文件提交
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            /*不同文件图标配置*/
            previewFileIconSettings: { 
                 'docx': '<i class="fa fa-file-word-o text-primary" ></i>',
                 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                 'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'htm': '<i class="fa fa-file-code-o text-info"></i>',
                 'txt': '<i class="fa fa-file-text-o text-info"></i>',
                 'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                 'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 
                 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
                 'png': '<i class="fa fa-file-photo-o text-primary"></i>'    
            },
            layoutTemplates:{ actionUpload:''},
            /*上传成功之后运行*/
            fileuploaded:$("#excel-input").on('fileuploaded', function (event, data) { 
                // var return_data = $.parseJSON(data.response);
                var return_data = data.response;
                if(return_data.result == true){
                    //提交成功后调用
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "上传成功，总共导入" + return_data.count + "条车辆数据",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                window.location.reload();
                            },
                        }
                    }).show();
                }else{
                    //提交失败后调用
                    new Noty({
                        type: "error",
                        layout: "topRight",
                        text: "上传失败，失败原因是" + return_data.reason + "</br>出错的车架号是 "+ return_data.vin,
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                // window.location.reload();
                            },
                        }
                    }).show();
                }
            }),

            /*上传出错误处理*/
            fileerror:$('#excel-input').on('fileerror', function(event, data, msg) {
                console.log(msg);
                //提交失败后调用
                new Noty({
                    type: "error",
                    layout: "topRight",
                    text: "上传失败，失败原因是" + return_data.reason,
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    },
                    callbacks: {
                        afterShow: function() {
                            // window.location.reload();
                        },
                    }
                }).show();
            }),
        });

        //切换侧边栏为窄边
        toggle();

    })(jQuery);

    function toggle(){
        if ($(window).outerWidth() > 1200) {
            $('#toggle-btn').toggleClass('active');

            $('.side-navbar').toggleClass('shrinked');
            $('.content-inner').toggleClass('active');

            if ($(window).outerWidth() > 1183) {
                if ($('#toggle-btn').hasClass('active')) {
                    $('.navbar-header .brand-small').hide();
                    $('.navbar-header .brand-big').show();
                } else {
                    $('.navbar-header .brand-small').show();
                    $('.navbar-header .brand-big').hide();
                }
            }

            if ($(window).outerWidth() < 1183) {
                $('.navbar-header .brand-small').show();
            }
        }
    }
 
    //提交删除链接
    function submitDelete(url,name){
        var n = new Noty({
            type: "error",
            text: '确认需要删除车架号为：</br>'+name+' 的车辆吗？</br>请慎重操作！ ',
            progressBar : true, 
            timeout: 2500,
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    $.post(url, function(data, status){
                        if (status == "success") {
                            if (data == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "车架号为 " + name + "的车辆删除成功",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "数据删除失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        }
                    });//确认后执行urlSubmit()完成实际执行
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };

    function callOutModalOpen(id,vin){
        $("#callout_id").val(id);
        $("#callout_vin").val(vin);
        $("#callout-modal").modal('show');
    }

    //车辆调出
    function submitCallOut(){
        var n = new Noty({
            type: "error",
            text: '确认需要调出车架号为：</br>'+name+' 的车辆吗？</br>请慎重操作！ ',
            progressBar : true, 
            timeout: 2500,
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    var id = $("#callout_id").val();
                    var vin = $("#callout_vin").val();
                    var location = $("#callout_location").val();
                    var url = "{:url('Stock/callout')}?id="+id+"&location=" +location;
                    $.post(url, function(data, status){
                        if (status == "success") {
                            if (data == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "车架号为 " + vin + "的车辆调出成功",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "车辆调出数据提交失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        }
                    });//确认后执行urlSubmit()完成实际执行
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };

    //打开detail模态框
    $('#detail-modal').on('hidden.bs.modal', function (e) {
        $(this).find('.modal-body').html(' 等待结果，请稍后...');
        $(this).removeData('bs.modal');
    }).on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget);
        var modal = $(this);
        modal.find('.modal-content').load(button.data("remote"));
    });

</script>
{/block}

//页面名称
{block name="PageName"}
车辆库存列表
{/block}

//自定义Modal
{block name="Modal"}
<!-- 详情Modal开始 -->
<div id="detail-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            读取中。。。
        </div>
    </div>
</div>
<!-- 详情Modal结束 -->

<!-- 导入Modal开始 -->
<div id="input-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">导入库存</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label class="control-label"> 选择文件 </label>
                        <input id="excel-input" type="file" class="file1" name="input-excel">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <span style="color:red;">请务必使用标准模板导入，以免出现不可预料的情况！    </span>
                        <a href="__STATIC__/template/StockInputTemplate.xlsx">模板下载</a>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入Modal结束 -->

<!-- 车辆调出Modal开始 -->
<div id="callout-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">车辆调出</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label class="control-label"> 调出地点 </label>
                        <input id="callout_location" type="text" class="form-control" name="callout_location">
                        <input id="callout_id" type="text" class="form-control" name="callout_id" hidden="hidden">
                        <input id="callout_vin" type="text" class="form-control" name="callout_vin" hidden="hidden">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitCallOut();">确定</button>
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入Modal结束 -->
{/block}

//主页面
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <!-- Export -->
        <div class="widget has-shadow">
        	<div class="widget-header bordered d-flex align-items-center">
                <h2>车辆库存列表</h2>
                <div class="widget-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#input-modal">导入</button>
                        <button type="button" class="btn btn-secondary" onclick="javascript:window.location.href='{:url('Stock/output')}'">导出</button>
                        <button type="button" class="btn btn-primary" onclick="javascript:window.location.href='create'">添加</button>
                    </div>
                </div>
            </div>
            <div class="widget-body">
                <div class="table-responsive">
                    <table id="table" class="table mb-0">
                        <thead>
                            <tr>
                                <th>到库时间</th>
                                <th>天数</th>
                                <th>车系</th>
                                <th>配置</th>
                                <th>内饰</th>
                                <th>颜色</th>
                                <th>车架号</th>
                                <th>存放地</th>
                                <th>监管方</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="data" id="list"}
                            <tr {if $list.mated == 1}style="color:green;"{/if}>
                                <td>{$list.create_date|date="Y/m/d"}</td>
                                <td {egt name="$list.age" value="90"}style="color:red;"{/egt}>{$list.age}</td>
                                <td>{$list.vehicle}</td>
                                <td>{$list.config}</td>
                                <td>{$list.trim}</td>
                                <td>{$list.color}</td>
                                <td>{$list.vin}</td>
                                <td>{$list.location}</td>
                                <td>{$list.regulator}</td>
                                <td class="td-actions">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-info btn-sm mr-1 mb-2" data-toggle="modal" data-remote="{:url('Stock/read',['id' => $list.id])}" data-target="#detail-modal">详情</button>
                                        <button type="button" class="btn btn-secondary btn-sm mr-1 mb-2" onclick="callOutModalOpen('{$list.id}','{$list.vin}');">调车</button>
                                        <button type="button" class="btn btn-warning btn-sm mr-1 mb-2"  onclick="javascript:window.location.href='{:url('Stock/edit',['id' => $list.id])}'">编辑</button>
                                        <button type="button" class="btn btn-danger btn-sm mr-1 mb-2" onClick="submitDelete({:url('Stock/delete',['id' => $list.id])}','{$list.vin}')">删除</button>
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>

<!-- End Centered Modal -->
{/block}

